<template>
  <div class="home-ctr">
    <div class="add-wrapper">
      <a-button type="primary" @click="insertUser">
        <PlusOutlined />
        新增用户
      </a-button>
    </div>
    <div class="table-wrapper">
      <a-table :dataSource="data.dataSource" :columns="columns">
        <template #time="{ text: CreatedAt }">
          {{ dayjs(CreatedAt).format('YYYY-MM-DD HH:mm:ss') }}
        </template>
        <template #action="{ record }">
          <a-space>
            <a-button type="link" @click="updateUser(record)">编辑</a-button>
            <a-popconfirm title="你确定要删除吗?" ok-text="是" cancel-text="否" @confirm="confirm(record.ID)" @cancel="cancel">
              <a-button type="link" danger>删除</a-button>
            </a-popconfirm>
          </a-space>
        </template>
      </a-table>
    </div>
  </div>

  <a-drawer :title=title :width="600" :visible="visible" :body-style="{ paddingBottom: '80px' }" @close="onClose">
    <a-form :model="data.form" :rules="rules" layout="vertical">
      <a-form-item label="用户名" name="username">
        <a-input v-model:value="data.form.username" placeholder="请输入用户名" />
      </a-form-item>
      <a-form-item label="密码" name="password" :class="{'hidden': disable}">
        <a-input-password v-model:value="data.form.password" placeholder="请输入密码" />
      </a-form-item>
      <a-form-item label="性别" name="gender">
        <a-select placeholder="请选择性别" v-model:value="data.form.gender">
          <a-select-option value="男">男</a-select-option>
          <a-select-option value="女">女</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="年龄" name="age">
        <a-input v-model:value="data.form.age" placeholder="请输入年龄" />
      </a-form-item>
    </a-form>
    <div :style="{
      position: 'absolute',
      right: 0,
      bottom: 0,
      width: '93%',
      borderTop: '1px solid #e9e9e9',
      padding: '10px 16px',
      background: '#fff',
      textAlign: 'right',
      zIndex: 1,
    }">
      <a-button style="margin-right: 8px" @click="onClose">取消</a-button>
      <a-button type="primary" @click="onSubmit">提交</a-button>
    </div>
  </a-drawer>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from "vue";
import { PlusOutlined } from '@ant-design/icons-vue';
import { getUserList } from "@/api/user.js"
import dayjs from 'dayjs'

// 抽屉标题
let title = ref("新增用户")
// 输入框禁用
let disable = ref(false)

onBeforeMount(() => {
  queryUserList()
})

const data = reactive({
  dataSource: [],
  form: [{
    ID: '',
    username: '',
    password: '',
    gender: '',
    age: ''
  }]
})

let pageParam = ref({
  pageSize: 10,
  pageNum: 1
})

const queryUserList = () => {
  getUserList(pageParam.value).then(res => {
    if (res.code == 200) {
      data.dataSource = res.data
    }
  })
}

const updateUser = (record) => {
  title.value = "编辑用户"
  disable.value = true

  data.form.ID = record.ID
  data.form.username = record.username
  data.form.gender = record.gender
  data.form.age = record.age
  showDrawer()
}

const insertUser = () => {
  title.value = "新增用户"
  disable.value = false

  data.form = []
  showDrawer()
}

import { message } from 'ant-design-vue';
import { addUser, editUser } from "@/api/user.js"
const onSubmit = () => {
  if (disable.value) { // 编辑
    const userInfo = {
      ...data.form
    }
    editUser(userInfo).then(res => {
      if (res.code == 200) {
        queryUserList()
        message.success('用户修改成功')
      } else {
        message.error('用户修改失败')
      }
      onClose()
    })
  } else { // 新增
    const userInfo = {
      ...data.form
    }
    addUser(userInfo).then(res => {
      if (res.code == 200) {
        queryUserList()
        message.success('用户添加成功')
      } else {
        message.error(res.message)
      }
      onClose()
    })
  }
}



// 抽屉开关
const visible = ref(false);
const showDrawer = () => {
  visible.value = true;
};
const onClose = () => {
  visible.value = false;
};

import { delUser } from "@/api/user.js"
const confirm = (ID) => {
  delUser(ID).then(res => {
    if (res.code == 200) {
      queryUserList()
      message.success('删除成功')
    } else {
      message.error('删除失败')
    }
  })
};
const cancel = e => {
};

const columns = [
  {
    title: 'ID',
    dataIndex: 'ID',
    key: 'ID',
  },
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username',
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '性别',
    dataIndex: 'gender',
    key: 'gender',
  },
  {
    title: '创建时间',
    dataIndex: 'CreatedAt',
    key: 'CreatedAt',
    slots: {
      customRender: 'time',
    },
  },
  {
    title: '操作',
    key: 'action',
    slots: {
      customRender: 'action',
    },
  },
]

</script>

<style lang="less" scoped>
.home-ctr {
  width: 800px;
  margin: 50px auto;

  .add-wrapper {
    margin-bottom: 20px;
  }
}
.hidden {
  display: none;
}
</style>